<template>
	<div class="BuyRobot">
		<van-popup v-model="show" position="bottom" duration="0.2">
			<div class="br_parameter" >
				<div class="title">
					确定交易
				</div>
				
				<p>商品名：{{name}}</p>
				<div class="buy_num">
					<span>买入数量：</span>
					<van-stepper v-model="num" />
				</div>
				<p>总价：{{price}}CNY</p>
				
				<div class="br_bottom">
					<div @click="show = false">取消</div>
					<div @click="confirm">确定</div>
				</div>
			</div>
		</van-popup>
		
		
		<!-- 交易密码弹窗 -->
		<div class="confirms">
			
			<van-popup v-model="confirmShow" :close-on-click-overlay="false">
				<div>
					<div class="title">请输入交易密码</div>
					
					<div style="width:4.5rem;margin: auto;">
					<van-password-input
					  :value="passowrd"
					  :length="6"
					  :gutter="6"
					  :focused="showKeyboard"
					  @focus="showKeyboard = true"
					/>
						
					</div>
					
					<div class="bottom_btn">
						<div @click="confirmShow = false">取消</div>
						<div @click="buy">确定</div>
					</div>
					
				</div>
			</van-popup>
		</div>
		
		
		<van-number-keyboard
		  :show="showKeyboard"
		  @input="onInput"
		  @delete="onDelete"
		  @blur="showKeyboard = false"
		/>
	</div>
</template>

<script>
	import Vue from 'vue';
	import { PasswordInput, NumberKeyboard, Stepper  } from 'vant';
	
	Vue.use(PasswordInput);
	Vue.use(NumberKeyboard);
	
	//步进器
	Vue.use(Stepper);
	export default{
		name:"BuyRobot",
		data(){
			return{
				show:false,
				//矿机id
				id:"",
				//矿机名
				name:"",
				//价格
				money:"",
				//矿机数量
				num:"",
				//交易密码
				jymm:"",
				
				//确认购买
				confirmShow:false,
				
				//输入密码弹窗
				showKeyboard:false,
				
				//交易密码
				passowrd:"",
				
				//买入数量
				num:1
			}
		},
		methods:{
			open(id,name,money){
				
				this.num = 1
				this.passowrd = ""
				// console.log(id,"id",name,"name",money,"money")
				this.id = id
				this.name = name
				this.money = money
				
				//购买数量调整页面
				this.show = true
			},
			//交易密码弹框
			confirm(){
				this.passowrd = ""
				//交易密码显示
				this.confirmShow = true
				//密码输入框显示
				this.showKeyboard = true
			},
			async buy(){
				
				let post_data = {
					id:this.id,
					num:this.num,
					jymm:this.passowrd
				}
				
				try{
					
					const data = await this.$apis.Common.buykj(post_data)
					
					this.$toast(data.msg)
					
					
					//逐渐隐藏
					setTimeout( ()=>{
						
						this.showKeyboard = false
						
						setTimeout( ()=> {
							
							this.confirmShow = false
							
							setTimeout( ()=>{
								
								this.show = false
								
							},250)
							
						},100)
						
					},100)
					
					this.passowrd = ""
					
					console.log(data)
					
				}catch(e){
					console.log(e)
					
					if(e.pwd) setTimeout( () => {this.passowrd = ""},1500)
					
					this.$toast(e.msg)
					
					//TODO handle the exception
				}
				
			},
			onInput(key) {
			  this.passowrd = (this.passowrd + key).slice(0, 6);
			},
			onDelete() {
			  this.passowrd = this.passowrd.slice(0, this.passowrd.length - 1);
			}
		},
		computed:{
			price: function(){
				return this.money * this.num
			}
		},
		watch:{
			passowrd: function(){
				if(this.passowrd.length >= 6) this.buy();
			}
		}
		
	}
</script>

<style lang="less" scoped>
	.BuyRobot{
			
		
		.br_parameter{
			padding-bottom: .6rem;
			background-color: rgb(15,34,58);
			box-shadow:inset 0px 0px .2rem 0px rgba(28,176,212,1);
			
			.title{
				padding-top: .39rem;
				padding-bottom: .28rem;
				font-size: .32rem;
				color: #94E9FF;
				text-align: center;
				border-bottom: 1px solid #1A304F;
				margin-bottom: .31rem;
			}
			
			.buy_num{
				display: flex;
				align-items: center;
				padding-left: 2.17rem;
				color: #94E9FF;
				font-size: .3rem;
				margin-top: .38rem;
				margin-bottom: .45rem;
			}
			
			.van-stepper{
				border: 1px solid #94E9FF;
				box-sizing: border-box;
				border-radius: .35rem;
				
			
				/deep/ .van-stepper__input{
					width: .35rem;
					height: .35rem;
					color: #94E9FF;
					background-color: transparent;
				}
				
				/deep/ button{
					border-radius: 50%;
					width: .35rem;
					height: .35rem;
					background-color: #94E9FF;
					color: #11223A;
				}
			}
			
			p{
				padding-left: 2.17rem;
				box-sizing: border-box;
				font-size: .3rem;
				color: #94E9FF;
			}
			
			.br_bottom{
				display: flex;
				align-items: center;
				justify-content: space-around;
				
				div{
					margin-top: .96rem;
					width:2rem;
					height:.44rem;
					background:rgba(15,33,56,1);
					border-radius:.1rem;
					text-align: center;
					line-height: .44rem;
					font-size: .3rem;
				}
				
				>div:nth-child(1){
					color: #94E9FF;
					box-shadow: inset 0px 0px .2rem 0px rgba(28,176,212,1);
				}
				
				>div:nth-child(2){
					color: #0F2138;
					background:linear-gradient(0deg,rgba(28,206,244,1),rgba(0,254,202,1));
					border-radius:.1rem;
				}
			}
			
		}
		
		.confirms{
			.title{
				color: #94E9FF;
				font-size: .32rem;
				text-align: center;
				margin-top: .59rem;
				margin-bottom: .67rem;
			}
			
			.van-popup{
				width: 5.65rem;
				height: 3.77rem;
				background-color: rgb(15,34,58);
				box-shadow:inset 0px 0px .2rem 0px rgba(28,176,212,1);
				border-radius:.2rem;
			}
		
			.van-password-input__security li{
				background-color: transparent;
				border: 1px solid #94E9FF;
				height: .5rem;
				width: .5rem;
			}
			
			.van-password-input__security i{
				background-color: #94E9FF;
			}
				
			.van-password-input__cursor{
				background-color:#94E9FF;
			}
			
			.bottom_btn{
				display: flex;
				align-items: center;
				justify-content: space-around;
				
				div{
					text-align: center;
					line-height: .44rem;
					font-size: .3rem;
					width:1.5rem;
					height:.44rem;
					border-radius:.1rem;
					// color: pink;
				}
				
				>div:nth-child(1){
					color: #94E9FF;
					box-shadow: inset 0px 0px .2rem 0px rgba(28,176,212,1);
				}
				
				>div:nth-child(2){
					color: #0F2138;
					background:linear-gradient(0deg,rgba(28,206,244,1),rgba(0,254,202,1));
					border-radius:.1rem;
				}
			}
			
		}
		
		.van-number-keyboard{
			z-index: 9999;
		}
		
	}
	
</style>
